今天來介紹Switch, switch開關股冥思一介是有開啟與關閉兩種狀態,它跟另一個元件CheckBox有些相似,CheckBox有勾選和未勾選兩種狀態。
Palette移動Switch到白色區域
activity_main.xml 介面
(設置完成)
activity_main.xml switch程式碼
textOff => 設定 Switch 關閉時顯示的文字
textOn => 設定 Switch 開啟時顯示的文字
showText => 設定 Switch 打開或關閉時是否顯示文字
switchPadding => 設定 Switch 元件與左側標題之間的距離
MainActivity
當我按下按鈕後,使用if判斷式,讓下方的TextView會跟著變動。
執行畫面
(關燈)
(開燈)
在Palette搜尋CheckBox,拖移CheckBox到白色區域
activity_main.xml 介面
(設置完成)
activity_main.xml CheckBox程式碼
android:text => 設定核取方塊右方的文字
(完整程式碼)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Switch
android:id="@+id/main_lightSwitch_sh"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="電燈開關"
android:showText="true"
android:textOff="關"
android:textOn="開"
app:layout_constraintBottom_toTopOf="@+id/guideline5"
app:layout_constraintEnd_toStartOf="@+id/guideline4"
app:layout_constraintStart_toStartOf="@+id/guideline3"
app:layout_constraintTop_toTopOf="@+id/guideline2"
tools:ignore="UseSwitchCompatOrMaterialXml" />
<CheckBox
android:id="@+id/main_checkbox_cb"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="是人類嗎?"
app:layout_constraintBottom_toTopOf="@+id/guideline8"
app:layout_constraintEnd_toStartOf="@+id/guideline4"
app:layout_constraintStart_toStartOf="@+id/guideline3"
app:layout_constraintTop_toTopOf="@+id/guideline7" />
<Button
android:id="@+id/main_sure_btn"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="確認"
app:layout_constraintBottom_toTopOf="@+id/guideline10"
app:layout_constraintEnd_toStartOf="@+id/guideline4"
app:layout_constraintStart_toStartOf="@+id/guideline3"
app:layout_constraintTop_toTopOf="@+id/guideline9" />
<TextView
android:id="@+id/main_lightMsg_tv"
android:layout_width="0dp"
android:layout_height="0dp"
android:textSize="20dp"
android:textStyle="bold"
android:text="關燈"
android:gravity="center"
app:layout_constraintBottom_toTopOf="@+id/guideline6"
app:layout_constraintEnd_toStartOf="@+id/guideline4"
app:layout_constraintStart_toStartOf="@+id/guideline3"
app:layout_constraintTop_toTopOf="@+id/guideline5" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.25" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.55" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.65" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.7" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.8" />
</androidx.constraintlayout.widget.ConstraintLayout>
(完整程式碼)
public class MainActivity extends AppCompatActivity {
//宣告
private Switch lightSwitch;
private TextView lightMsgTextView;
private CheckBox checkBox;
private Button sureButton;
private Context context = this;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
EdgeToEdge.enable(this);
setContentView(R.layout.activity_main);
//綁定
lightSwitch = findViewById(R.id.main_lightSwitch_sh);
lightMsgTextView = findViewById(R.id.main_lightMsg_tv);
checkBox = findViewById(R.id.main_checkbox_cb);
sureButton = findViewById(R.id.main_sure_btn);
lightSwitch.setOnCheckedChangeListener((buttonView, isChecked) -> {
if (isChecked) {
lightMsgTextView.setTextColor(Color.parseColor("#FFF9AD40"));
lightMsgTextView.setText("開燈");
} else {
lightMsgTextView.setTextColor(Color.parseColor("#ABA9A7"));
lightMsgTextView.setText("關燈");
}
});
//按鈕先設置為不可點擊
sureButton.setEnabled(false);
//CheckBox狀態改變觸發動作
checkBox.setOnCheckedChangeListener(new CheckBox.OnCheckedChangeListener()
{
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked)
{
//判斷CheckBox是否有勾選,同mCheckBox.isChecked()
if(isChecked)
{
//CheckBox狀態 : 已勾選
checkBox.setChecked(true);
sureButton.setEnabled(true);
}
else
{
//CheckBox狀態 : 未勾選
checkBox.setChecked(false);
sureButton.setEnabled(false);
}
}
});
//按鈕
sureButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(context, "你好! 人類", Toast.LENGTH_SHORT).show();
}
});
}
}
以上就是Switch與CheckBox的應用,使用他們的地方也不少。
p.s.也可以客製化Switch喔~可自行上網搜尋